<template>
<div class="ChartLineItem">
  <div class="item-header">
    <span class="item-title">{{data.title}}</span>
  </div>
  <div class="item-content">
    <div ref="el"></div>
  </div>
</div>
</template>

<script>
export default {
  name: "ChartLineItem",
  inject: ['initChart'],
  props:{
    data:{
      type: Object,
      required: true
    }
  },
  mounted(){
    this.initLine();
  },
  methods:{
    initLine(){
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: this.data.formatter
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.generateLast15Days(),
          interval: this.generateLast15Days().length,
          axisLabel:{
            interval: 0,
            color: "#00c2ff"
          },
          axisLine:{
            lineStyle: {
              color: "rgba(0, 194, 255, 0.3)"
            }
          },
          splitLine:{
            show: true,
            lineStyle: {
              color: "rgba(0, 194, 255, 0.3)"
            }
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          axisLabel:{
            color: "#00c2ff"
          },
          axisLine:{
            lineStyle: {
              color: "rgba(0, 194, 255, 0.3)"
            }
          },
          splitLine:{
            show: true,
            lineStyle: {
              color: "rgba(0, 194, 255, 0.3)"
            }
          }
        },
        series: [{
          data: this.data.value,
          type: 'line',
          itemStyle: {
            color: "transparent",
            borderColor: "#09d8eb",
            borderWidth: 1
          },
          lineStyle:{
            color: "#09d8eb"
          },
          areaStyle: {
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#CC0033' // 0% 处的颜色
              }, {
                offset: 1, color: '#990066' // 100% 处的颜色
              }],
            }
          }
        }],
        grid: [{
          top: '10%',
          bottom: '15%',
          left: '10%',
          right: '5%'
        }]
      };
      this.initChart(this.$refs['el'], option);
    },
    //过去15日字符串
    generateLast15Days(){
      const format2 = s => (s + '').length < 2 ? '0' + s : s;
      const ary = [];
      for(let i=0;i<15;i++){
        let now = new Date().valueOf(), oneDay = 1000*60*60*24, tmpDay = new Date(now - oneDay * i);
        ary.push(format2(tmpDay.getMonth() + 1) + '/' + format2(tmpDay.getDate()));
      }
      return ary.reverse();
    }
  }
}
</script>

<style scoped lang="less">
.ChartLineItem{
  border: @common-border;
  color: #666;
  margin-bottom: 10px;
  width: 100%;
  height: 342px;
  position: relative;
  >.item-header{
    background: #f1f1f1;
    height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:after{
      content: '\4eca\65e5';
      display: inline-block;
    }
  }
  >.item-content{
    padding: 15px;
    >*{
      width: 100%;
      height: 270px;
    }
  }
}
</style>